<!-- 换货详情 -->
<template>
    <div>
        <div style="background-color: #eae9e5; position: relative;">
            <van-config-provider :theme-vars="themeVars">
                <van-nav-bar
                title="换货进度"
                left-arrow
                :border="false"
                fixed="true"
                style=" background-color: #eae9e5;"
                @click-left="onClickLeft"
                />
                <div style="height: 46px;"></div>
                <div style="background-color: white; padding:20px; padding-top: 20px;">
                    <div style="margin-bottom: 8px;">
                        <span>{{OrderInformation.mingcheng}}</span>
                    </div>
                    <div style=" height: 80px;">
                        <img style=" float: left; width: 80px;height: 80px;border-radius: 6px; margin-right: 8px;" :src="OrderInformation.img" alt="图片丢失">
                        <div style=" float: left; width: 180px;">
                            <div>{{OrderInformation.name}}</div>
                            <span style="color: gray; display: block;">{{OrderInformation.yangse}}</span>
                            <van-tag type="warning">七天换货</van-tag>
                        </div>
                        <div style=" float: right; color: gray; right: 8px;">
                            <div>{{OrderInformation.age}}</div>
                            <div style=" float: right;">x{{OrderInformation.jiang}}</div>
                        </div>
                    </div>
                    <!-- 111 -->
                    <div style=" position: relative; height: 66px;">
                        <van-divider :style="{ borderColor:'gray'}"/>
                        <div style="float:left; position: relative;">
                            <div style="position: absolute; background-color: #921b31;width: 18px;height: 18px; border-radius: 50%;">
                                <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                            </div>
                        </div>
                        <div style="float: left; margin-left: 28px;">
                            <span style="font-weight: bold; font-size: 14px;">等待用户退回原商品</span>
                            <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                        </div>
                    </div>
                    <!-- 222 -->
                    <div style=" position: relative; height: 66px;">
                        <van-divider :style="{ borderColor:'gray'}"/>
                        <div style="float:left; position: relative;">
                            <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                            </div>
                        </div>
                        <div style="float: left; margin-left: 28px;">
                            <span style="color: gray; font-weight: bold; font-size: 14px;">{{OrderInformation.mingcheng}}管理员审核通过</span>
                            <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                        </div>
                    </div>
                    <!-- 333 -->
                    <div style=" position: relative; height: 66px;">
                        <van-divider :style="{ borderColor:'gray'}"/>
                        <div style="float:left; position: relative;">
                            <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                            </div>
                        </div>
                        <div style="float: left; margin-left: 28px;">
                            <span style="color: gray; font-weight: bold; font-size: 14px;">{{OrderInformation.mingcheng}}管理员审核</span>
                            <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                        </div>
                    </div>
                    <!-- 444 -->
                    <div style=" position: relative; height: 66px;">
                        <van-divider :style="{ borderColor:'gray'}"/>
                        <div style="float:left; position: relative;">
                            <div style="position: absolute; background-color: gray;width: 18px;height: 18px; border-radius: 50%;">
                                <div style="margin-top: 3px; margin-left: 3px; position: absolute; background-color: white;width: 12px;height: 12px; border-radius: 50%;"></div>
                            </div>
                        </div>
                        <div style="float: left; margin-left: 28px;">
                            <span style="color: gray; font-weight: bold; font-size: 14px;">用户发起换货申请</span>
                            <div style="color: gray; font-size: 12px; margin-top: 10px;"><span>2019年7月12日</span>&nbsp;&nbsp;&nbsp;<span>上午1:54:44</span></div>
                        </div>
                    </div>
                    <!-- 尾部 -->
                    <div style=" margin-top: 20px; color: #99856f; font-weight: bold; font-size: 18px;display: flex; justify-content: center;">
                        <span>没有更多了哦~</span>
                    </div>
                </div>
            </van-config-provider>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted,reactive,ref} from "vue";
import {getorder} from '@/api/order.ts';
import { useRouter,useRoute } from "vue-router";
let OrderInformation = ref([]);
let icon = ref('passed');
const router =useRouter();
const route =useRoute();
const themeVars = {
    NavBarIconColor:'#c1ab96'
}
const onClickLeft = () => history.back();
onMounted(() => {
    getorder()
    .then(res=>{
            if(route.query.id){
                OrderInformation.value=res.data.data[route.query.id-1]
                if(OrderInformation.value.jiaoyijg==0){
                    icon.value='passed'
                }else{
                    icon.value='close'
                }
            }else{
                router.push('/')
            }
    })
});
</script>
<style>

</style>